<template>
  <div class='container'>
    <div class='binner'></div>
    <div class='body-box'>
      <div class='left-box'>
        <!-- 业务资源数据 -->
        <div class='ywzy-box'>
          <headTitle title='业务资源数据' :icon-url='ywzyIcon'></headTitle>
          <div class='box-body'>
            <div class='left-nav--box'>
              <div class='btn-group'>
                <div :class='leftBtnSelect == item.index ? "left-btn select-btn" : "left-btn"' v-for='(item,index) in leftBtnList' :key='index' @click='clickLeftBtn(index)'>{{item.name}}</div>
              </div>
            </div>
            <div class='right-table-box'>
              <div class='top-nav-box'>
                <div :class='topBtnSelect == item.index ? "top-txt-btn select-btn" : "top-txt-btn"' v-for='(item,index) in topBtnList' :key='index' @click='clickTopBtn(index)'>{{item.name}}</div>
              </div>
              <!-- 表格 -->
              <div class='ywzy-table'>
                <table>
                  <tbody>
                    <tr v-for='(item,index) in ywzyNewTableData' :key='index'>
                      <td class='td-time'>{{item.time}}</td>
                      <td class='td-name'>{{item.name}}</td>
                      <td class='td-btn' @click='clickywzyBtn'>{{item.btnType == 1?'减灾能力':'致灾因子'}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- 使用申请公示 -->
        <div class='sqgs-box'>
          <headTitle title='使用申请公示' :icon-url='syzyIcon'></headTitle>
          <div class='sysqgs-table' :style='{width:tableWidth}'>
            <a-table :dataSource="dataSource" :scroll="{ x: 900 }" :columns="columns" bordered rowKey="id" size="middle">
              <template slot="shzt" slot-scope='record,index'>
                <span class='pass-txt' v-if='record == "1"'>授权通过</span>
                <span class='fail-txt' v-if='record == "2"'>授权不通过</span>
              </template>
              <template slot="operation" slot-scope='text, record'>
                <a @click='clickXq(record)'>详情</a>
              </template>
            </a-table>
          </div>
        </div>
      </div>
      <!-- 数据分类 -->
      <div class='sjfl-box'>
        <headTitle title='数据分类' :icon-url='sjflIcon'></headTitle>
        <div class='fl-list'>
          <div class='type-item' v-for='(item,inedx) in typeDataList' :key='inedx'>
            <img :src='item.url' alt=''/>
            <div class='info'>
              <div class='num'>{{item.num}}</div>
              <div class='txt'>{{item.txt}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headTitle from './components/headTitle'
  export default {
    name: 'Analysis',
    components:{
      headTitle
    },
    computed:{
      tableWidth(){
        var screenWidth = document.documentElement.clientWidth;
         var tWidth = screenWidth - 630;
         return tWidth + 'px'
      }
    },
    data() {
      return {
        //业务资源icon地址
        ywzyIcon:require('@/assets/img/index/icon_yewu.png'),
        //使用申请icon地址
        syzyIcon:require('@/assets/img/index/icon_shenqing.png'),
        //数据分类icon地址
        sjflIcon:require('@/assets/img/index/icon_jichu.png'),
        //业务资源数据（1：最新、2；热门）
        leftBtnSelect:1,
        leftBtnList:[
          {
            name:'最新数据',
            index:1
          },
          {
            name:'热门数据',
            index:2
          },
        ],
        //最新上线目录：1，最新更新数据：2
        topBtnSelect:1,
        topBtnList:[
          {
            name:'最新上线目录',
            index:1
          },
          {
            name:'最新更新数据',
            index:2
          },
        ],
        //业务资源表格数据（最新上线）
        ywzyNewTableData:[
          {
            time:'2022-08-19 13:12:23',
            name:'医疗卫生机构数据',
            btnType:1
          },
          {
            time:'2022-08-19 13:12:23',
            name:'雷电灾害风险评估图',
            btnType:2
          },{
            time:'2022-08-19 13:12:23',
            name:'地震灾害风险评估图',
            btnType:2
          },{
            time:'2022-08-19 13:12:23',
            name:'沙尘暴灾害人口风险评估图',
            btnType:2
          },{
            time:'2022-08-19 13:12:23',
            name:'气象灾害综合预警',
            btnType:2
          },{
            time:'2022-08-19 13:12:23',
            name:'沙尘暴灾害人口风险评估图',
            btnType:2
          },{
            time:'2022-08-19 13:12:23',
            name:'雷电灾害人口风险区划图',
            btnType:2
          },{
            time:'2022-08-19 13:12:23',
            name:'低温灾害玉米风险分区(区划)图',
            btnType:2
          },
        ],
        //使用申请公示表头数据
        columns:[
          {
            title: '序号',
            dataIndex: 'xh',
            key: 'xh',
            width:60,
            align:'center'
          },
          {
            title: '资源名称',
            dataIndex: 'zymc',
            width:160,
          },
          {
            title: '申请者',
            dataIndex: 'sqz',
            width:130,
          },
          {
            title: '申请提交时间',
            dataIndex: 'sqtjsj',
            width:150,
            align:'center'
          },
          {
            title: '应用系统名称',
            dataIndex: 'yyxtmc',
            width:130,
          },
          {
            title: '审核状态',
            dataIndex: 'shzt',
            scopedSlots: { customRender: 'shzt' },
            width:120,
            // fixed: 'right',
            align:'center'
          },
          {
            title: '操作',
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' },
            width:60,
            fixed: 'right',
            align:'center'
          },
        ],
        //使用申请公示表格数据
        dataSource:[
          {
            xh: '1',
            zymc:'干旱灾害小麦风险分区',
            sqz:'Y******',
            sqtjsj:'2022-09-02 13:09:23',
            yyxtmc:'灾害评估系统',
            shzt:'1'
          },
          {
            xh: '2',
            zymc:'气象站数量',
            sqz:'Y******',
            sqtjsj:'2022-09-02 13:09:23',
            yyxtmc:'灾害评估系统',
            shzt:'2'
          },
          {
            xh: '3',
            zymc:'气象灾害综合风险性图',
            sqz:'Y******',
            sqtjsj:'2022-09-02 13:09:23',
            yyxtmc:'灾害评估系统',
            shzt:'1'
          },
          {
            xh: '4',
            zymc:'低温灾害玉米风险分区',
            sqz:'Y******',
            sqtjsj:'2022-09-02 13:09:23',
            yyxtmc:'灾害信息上报系统',
            shzt:'1'
          },
          {
            xh: '5',
            zymc:'台风灾害水稻风险评估图',
            sqz:'Y******',
            sqtjsj:'2022-09-02 13:09:23',
            yyxtmc:'灾害信息上报系统',
            shzt:'1'
          }
        ],
        //分类数据
        typeDataList:[
          {
            url:require('@/assets/img/index/icon_zhizai.png'),
            num:'41',
            txt:'致灾因子'
          },
          {
            url:require('@/assets/img/index/icon_chengzai.png'),
            num:'321',
            txt:'承载体'
          },
          {
            url:require('@/assets/img/index/icon_yunzai.png'),
            num:'67',
            txt:'孕灾环境'
          },
          {
            url:require('@/assets/img/index/icon_lishi.png'),
            num:'88',
            txt:'历史灾情'
          },
          {
            url:require('@/assets/img/index/icon_jianzai.png'),
            num:'56',
            txt:'减灾能力'
          },
          {
            url:require('@/assets/img/index/icon_jichu.png'),
            num:'27',
            txt:'基础地理'
          },
          {
            url:require('@/assets/img/index/icon_fangzhi.png'),
            num:'37',
            txt:'防治区划'
          },
          {
            url:require('@/assets/img/index/icon_fengxian.png'),
            num:'27',
            txt:'风险区划'
          },
          {
            url:require('@/assets/img/index/icon_pinggu.png'),
            num:'37',
            txt:'风险评估'
          },
          {
            url:require('@/assets/img/index/icon_yinhuan.png'),
            num:'43',
            txt:'重点隐患'
          }
        ]
      }
    },
    created() {

    },
    methods: {
      clickLeftBtn(index){
        this.leftBtnSelect = this.leftBtnList[index].index
      },
      clickTopBtn(index){
        this.topBtnSelect = this.topBtnList[index].index
      },
      //点击业务资源表格按钮
      clickywzyBtn(){
        this.$router.push({
          path:'/dataCategary/details'
        })
      },
      clickXq(record){
        console.log('点击行信息',record)
        this.$router.push({
          path:'./Monitor'
        })
      }
    }
  }
</script>
<style lang="less" scoped>
//@import '~@assets/less/common.less';
*{
  padding: 0;
  margin: 0;
}
.container{
  padding: 20px 15px;
  background: #EEF2FB;
  .binner{
    width: 100%;
    background-image: url("../../../src/assets/img/index/banner.png");
    background-repeat: no-repeat;
    height: 198px;
    border-radius: 12px;
    margin: 0 5px;
  }
  @media screen and (max-width: 1400px){
    .binner{
      width: 100%;
      background-image: url("../../../src/assets/img/index/banner_small.png");
      background-repeat: no-repeat;
      height: 198px;
      border-radius: 12px;
      margin: 0 5px;
    }
  }
  .body-box{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    //height: 762px;
    .left-box{
      flex: 1;
      .ywzy-box{
        width: 100%;
        height: 430px;
        background: #fff;
        border-radius: 8px;
        .box-body{
          display: flex;
          .left-nav--box{
            width: 172px;
            height: 359px;
            background: #F5F7F9;
            padding-left: 16px;
            .btn-group{
              margin-top: 92px;
              .left-btn{
                width: 100%;
                height: 68px;
                line-height: 68px;
                text-align: center;
                font-size: 14px;
                font-weight: 500;
                color: #1B2C49;
                cursor: pointer;
                border-right: 3px solid #F5F7F9;
              }
              .select-btn{
                background: linear-gradient(270deg, rgba(52,119,255,0.35) 0%, rgba(255,255,255,0) 100%);
                color: #3477FF;
                border-right: 3px solid #3477FF;
              }
            }
          }
          .right-table-box{
            width: 100%;
            .top-nav-box{
              width: 100%;
              height: 40px;
              background: #F7F8FB;
              padding-left: 60px;
              display: flex;
              .top-txt-btn{
                font-size: 16px;
                font-weight: 500;
                color: #1B2C49;
                line-height: 40px;
                height: 40px;
                cursor: pointer;
                margin-right: 120px;
              }
              .select-btn{
                color: #3477FF;
              }
            }
            .ywzy-table{
              width: 100%;
              padding-left: 60px;
              height: 320px;
              overflow-y: auto;
              padding-top: 10px;
              padding-right: 20px;
              table{
                width: 100%;
              }
              tr{
                width: 100%;
                height: 40px;
                line-height: 40px;
                overflow: hidden;
              }
              .td-time{
                font-size: 14px;
                font-weight: 400;
                color: #73848F;
              }
              .td-name{
                font-size: 14px;
                font-weight: 400;
                color: #1B2C49;
              }
              .td-btn{
                font-size: 14px;
                font-weight: 400;
                color: #3477FF;
                cursor: pointer;
                position: relative;
                float: right;
              }
            }
          }
        }
      }
      .sqgs-box{
        width: 100%;
        height: 310px;
        margin-top: 20px;
        background: #fff;
        border-radius: 8px;
        .sysqgs-table{
          width: 100%;
          padding: 12px 20px;
          height: 260px;
          overflow-y: auto;
          overflow: overlay !important;
          .pass-txt{
            color: #48CB8B;
          }
          .fail-txt{
            color: red;
          }
        }
      }
    }
    .sjfl-box{
      width: 564px;
      margin-left: 20px;
      background: #fff;
      border-radius: 8px;
      .fl-list{
        width: 100%;
        display: flex;
        padding: 46px 20px;
        flex-wrap: wrap;
        .type-item{
          width: 149px;
          height: 64px;
          display: flex;
          margin-right: 38px;
          margin-bottom: 70px;
          img{
            width: 64px;
            height: 64px;
          }
          .info{
            margin-left: 20px;
            .num{
              height: 36px;
              font-size: 28px;
              font-weight: bold;
              color: #1B2C49;
              line-height: 36px;
            }
            .txt{
              margin-top: 9px;
              font-size: 14px;
              font-weight: 400;
              color: #73848F;
              line-height: 20px;
            }
          }
        }
        :nth-child(3n){
          margin-right: 0;
        }
      }
    }
  }
}
</style>
